﻿@page "/calendars"

<h3>Calendar 日历框</h3>

<h4>按照日历形式展示数据的容器。当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。</h4>

<Block Title="基础用法" Introduction="基础的日历显示。" CodeFile="calendar.1.html">
    <Calendar ValueChanged="@OnValueChanged" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="日历框选择时间时数据自动更新文本框" CodeFile="calendar.2.html">
    <Calendar @bind-Value="@BindValue" />
    <BootstrapInput TItem="DateTime" @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
</Block>

<Block Title="按周展示" Introduction="通过设置属性 <code></code>" CodeFile="calendar.3.html">
    <Calendar ViewModel="CalendarViewModel.Week" />
</Block>

<Block Title="实战应用" Introduction="课堂表" CodeFile="calendar.4.html">
    <p>目前按周内组件暂时为统一使用 <code>ChildContext</code> 来进行渲染，所有单元格内的数据相关操作组件均未进行封装，稍后完善</p>
    <Calendar ViewModel="CalendarViewModel.Week">
        <tr>
            <td class="none">无</td>
            <td rowspan="4"><div class="less ch">语文</div></td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td rowspan="3"><div class="less en">英语</div></td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td style="background-color: #f8f9fa;" colspan="7">午休</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td class="none">无</td>
        </tr>
    </Calendar>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
